<!--
    页面：导入导出
    路由：/importSheet
    作者：尹竹群
    部门：查账开发部
    时间：2021-09
    编辑：
-->
<template>
  <div class="container">
    <Row v-tc-height="'100%'">
      <!-- luckysheet表格区域 -->
      <i-col span="21" v-tc-height="'100%'">
        <div class="luckysheet" id="insertRow"></div>
      </i-col>
      <!-- 控制台 -->
      <i-col span="3" v-tc-height="'100%'">
        <Card :bordered="false">
          <p slot="title">控制台</p>
          <p>
            <Row v-tc-bottom="10">
              <Col span="24">
                <Button type="primary" @click="handleAddRowColumn('row')"
                  >第二行后插入10行</Button
                >
              </Col>
            </Row>
            <Row v-tc-bottom="10">
              <Col span="24">
                <Button type="primary" @click="handleAddRowColumn('column')"
                  >第二列后插入10列</Button
                >
              </Col>
            </Row>
          </p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
// 引入loadsh
import { cloneDeep } from "lodash";
// 解析文件插件
import LuckyExcel from "luckyexcel";
import LuckyExport from "./utils/export";

export default {
  name: "insertRow",
  data() {
    return {
      // 表格初始化数据
      sheetData: {
        // 设定DOM容器的id
        container: "insertRow",
        // 是否显示顶部信息栏
        showinfobar: false,
        // 设定表格语言
        lang: "zh",

        // 表格
        data: [
          //数据
          {
            name: "表一", //工作表名称
            color: "",
            index: 0, //唯一id
            status: 1,
            order: 0,
            row: 20, //行数
            column: 20, //列数
            celldata: [],
            config: {},
            allowEdit: false
          },
          {
            name: "表二",
            color: "",
            index: 1,

            status: 0,
            order: 1,
            celldata: [],
            config: {}
          }
        ]
      },
      // 备份数据
      copySheetData: null,
      // 表格数据
      showSheetData: null
    };
  },
  methods: {
    /**
     * 初始化报表
     */
    initSheet() {
      window.luckysheet.create(this.showSheetData);
    },
    /**
     * 上传拦截
     * @param {File} file 选择的文件
     */
    handleUpload(file) {
      if (!file) return;

      let suffixArr = file.name.split("."),
        suffix = suffixArr[suffixArr.length - 1];

      if (suffix !== "xlsx") {
        alert("目前只支持xlsx格式的文件");
        return;
      }

      // 加载
      LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
          alert(
            "Failed to read the content of the excel file, currently does not support xls files!"
          );
          return;
        }
        window.luckysheet.destroy();

        this.showSheetData.data = exportJson.sheets;
        this.showSheetData.title = exportJson.info.name;

        this.copySheetData = cloneDeep(this.showSheetData);

        this.initSheet();
      });
      return false;
    },
    /**
     * 导出
     */
    handleExport() {
      const sheetData = window.luckysheet.getluckysheetfile();
      LuckyExport(sheetData);
    },
    /**
     * 重置
     */
    handleClear() {
      console.log(this.showSheetData);
      //   window.luckysheet.destroy();

      //   this.showSheetData = cloneDeep(this.sheetData);
      //   this.initSheet();
    },
    /**
     * 导入JSON
     */
    handleJSON() {
      window.luckysheet.destroy();

      this.showSheetData = cloneDeep(this.copySheetData);

      this.initSheet();
    },
    /**
     * 新增工作簿
     */
    handleAddSheet() {
      window.luckysheet.setSheetAdd({
        sheetObject: {
          name: "Sheet三",
          color: "",
          index: 2,
          status: 0,
          order: 2,
          celldata: [],
          config: {}
        },
        order: 2,
        success: () => {
          console.log("新增成功");
        }
      });
    },
    /**
     * 删除工作簿
     */
    handleDeleteSheet() {
      window.luckysheet.setSheetDelete({
        order: 2,
        success: () => {
          console.log("删除成功");
        }
      });
    },
    /**
     * 重命名
     */
    handleEditSheet() {
      window.luckysheet.setSheetName("重新修改", {
        order: 0,
        success: () => {
          console.log("删除成功");
        }
      });
    },
    /**
     * 激活
     * @param {Number} sheet 待激活sheet的index值
     */
    handleActiveSheet(sheet = 0) {
      window.luckysheet.setSheetActive(sheet);
    },
    /**
     * 初始化表格行、列
     * @param {String} type 列或者行
     * @param {Number} number 初始化数量
     */
    handleInitSheet(type, number = 10) {
      window.luckysheet.destroy();
      //   this.showSheetData.data[0].row = number;
      //   this.showSheetData.data[0].column = number;

      type === "row" && (this.showSheetData.data[0].row = number);
      type === "column" && (this.showSheetData.data[0].column = number);
      this.showSheetData.data[0].data = [];

      this.initSheet();
    },
    /**
     * 滚动到50行
     * @param {Number} number 初始化数量
     */
    handleScroll(number = 50) {
      window.luckysheet.scroll({
        targetRow: number
      });
    },
    /**
     * 添加表格行、列
     * @param {String} type 列或者行
     * @param {Number} number 初始化数量
     */
    handleAddRowColumn(type, number = 10) {
      type === "row" &&
        window.luckysheet.insertRow(1, {
          number
        });

      type === "column" &&
        window.luckysheet.insertColumn(1, {
          number
        });
    },
    /**
     * 删除表格行、列
     * @param {String} type 列或者行
     * @param {Number} number 初始化数量
     */
    handleDeleteRowColumn(type, number = 10) {
      type === "row" && window.luckysheet.deleteRow(1, number + 1);

      type === "column" && window.luckysheet.deleteColumn(1, number + 1);
    }
  },
  mounted() {
    this.showSheetData = cloneDeep(this.sheetData);

    // 初始化报表
    this.initSheet();
  }
};
</script>

<style scoped>
.luckysheet {
  width: 100%;
  height: 100%;
}
</style>
